<template>
  <el-dialog
    title="新增调价"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="900px"
  >
    <el-tabs v-model="listStr" @tab-click="listStrChange">
      <el-tab-pane label="主标号" name="listDesignator"></el-tab-pane>
      <el-tab-pane label="附加标号" name="listTitle"></el-tab-pane>
      <el-tab-pane label="合同加价" name="listMarkups"></el-tab-pane>
    </el-tabs>
    <!-- <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="68px"
    >
      <el-form-item label="ID" prop="userInfoId">
        <el-input
          v-model.trim="queryParams.userInfoId"
          placeholder="ID"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户名称" prop="principalName">
        <el-input
          v-model.trim="queryParams.principalName"
          placeholder="请输入客户名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form> -->
    <div v-if="selectUsers.length > 0"></div>
    <el-table
      v-loading="loading"
      :data="nameList"
      ref="multipleTable"
      @current-change="handleCurrentChange"
    >
      <template v-if="listStr == 'listDesignator'">
        <el-table-column label="名称" align="center" key="name" prop="name" />
        <el-table-column
          label="计价类型"
          align="center"
          key="principalName"
          prop="principalName"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>一口价</span>
          </template>
        </el-table-column>
        <el-table-column
          label="价格"
          align="center"
          key="benchmarkPrice"
          prop="benchmarkPrice"
          :show-overflow-tooltip="true"
        />
      </template>
      <template v-if="listStr == 'listTitle'">
        <el-table-column label="名称" align="center" key="name" prop="name" />
        <el-table-column
          label="计价类型"
          align="center"
          key="principalName"
          prop="principalName"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>一口价</span>
          </template>
        </el-table-column>
        <el-table-column
          label="价格"
          align="center"
          key="price"
          prop="price"
          :show-overflow-tooltip="true"
        />
      </template>
      <template v-if="listStr == 'listMarkups'">
        <el-table-column
          label="名称"
          align="center"
          key="markupsName"
          prop="markupsName"
        />
        <el-table-column
          label="计价类型"
          align="center"
          key="markupsType"
          prop="markupsType"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="价格"
          align="center"
          key="markupsValue"
          prop="markupsValue"
          :show-overflow-tooltip="true"
        />
      </template>
      <el-table-column
        fixed="right"
        v-if="!multiple"
        align="center"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button @click="selectItem(scope.row)" type="text" size="small"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
import { listDesignator } from "@/api/service/main";
import { listTitle } from "@/api/service/submain";
import { listMarkups } from "@/api/service/config-center/markups";

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 已选择的用户
    defauleUser: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      listStr: "listDesignator",
      listDesignator,
      listTitle,
      listMarkups,

      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
        enable: true,
      },
      total: 0,
      nameList: [],
      multipleSelection: [],

      selectUsers: [],
    };
  },
  methods: {
    listStrChange() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleClick(e) {
      this.getList();
    },
    selectItem(row) {
      if (this.listStr == "listDesignator") {
        this.$emit("onSubmit", {
          id: row.id,
          type: 1,
          name: row.name,
          valuationType: 2,
          previousPrice: row.benchmarkPrice,
        });
      }
      if (this.listStr == "listTitle") {
        this.$emit("onSubmit", {
          id: row.id,
          type: 2,
          name: row.name,
          valuationType: 2,
          previousPrice: row.price,
        });
      }
      if (this.listStr == "listMarkups") {
        this.$emit("onSubmit", {
          id: row.id,
          type: 3,
          name: row.markupsName,
          valuationType: row.markupsType.includes("一口价") ? 2 : 1,
          previousPrice: row.markupsValue,
        });
      }

      this.handleClose();
    },
    handleCurrentChange(row) {
      this.rowData = row;
    },
    handleSelect(selection, row) {
      this.rowData = row;
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    handleSubmit() {
      this.$emit("onSubmit", this.rowData);
      this.handleClose();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleClose() {
      this.$emit("onClose");
    },
    handleQuery() {
      this.getList();
    },
    getList() {
      this.loading = true;
      this[this.listStr](this.queryParams).then((res) => {
        if (this.listStr == "listMarkups") {
          this.nameList = res.data.filter(item => item.enable);
          this.total = 0;
        } else {
          this.nameList = res.rows;
          this.total = res.total;
        }

        this.loading = false;
      });
    },
  },
  watch: {
    dialogVisible(newValue, oldValue) {
      if (newValue) {
        // this.selectUsers = this.defauleUser;
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
